<template>
    <div class="speaks">
        <div class="top">
            <el-button type="primary" size="default" @click="add_speak">添加</el-button>

        </div>
        <el-table :data="list_speak" style="width: 100%">
            <el-table-column label="发布时间" width="300">

                <template #default="scope">
                    <div style="display: flex; align-items: center">

                        {{ scope.row.publish_time }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="发布内容" width="300">
                <template #default="scope">

                    <div class="over"> {{ scope.row.textual }}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleUpdate(scope.$index, scope.row)">
                        修改
                    </el-button>
                    <el-popconfirm title="确认删除吗?" confirm-button-text="确认" cancel-button-text="取消"
                        @confirm="handleDelete(scope.$index, scope.row)">
                        <template #reference>
                            <el-button size="small" type="danger">
                                删除
                            </el-button>
                        </template>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination layout="prev, pager, next" :total="count" v-model:current-page="currentPage"
                @current-change="handleCurrentChange" :page-size="8" background />
        </div>
        <el-dialog style="background-color: rgba(255,255 , 255, 0.8);" v-model="dialogVisible" title="添加说说" width="1000"
            draggable>
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                :mode="mode" />
            <Editor style="height: 350px;width: 100%; overflow-y: hidden;" v-model="valueHtml"
                :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="upload_speck">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { IToolbarConfig } from '@wangeditor/editor'
//@ts-ignore
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import SpeakStore from "@/store/SpeakStore"
import { ref, shallowRef, onBeforeUnmount, onMounted, nextTick, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { format } from "@/utils/formatTime"
const current_tiem = format.formatDate2(Date.now())
const editorRef = shallowRef()
const isEdit = ref(false)
const currentPage = ref(1)
const store = SpeakStore()
const dialogVisible = ref(false)

const forms = ref({
    rich_text: "",
    textual: "",
    publish_time: Date.now(),
    year: current_tiem.year,
    month: current_tiem.month,
})
watch(dialogVisible, (e) => {
    if (!e) {
        isEdit.value = false
        forms.value = {
            rich_text: "",
            textual: "",
            publish_time: Date.now(),
            year: current_tiem.year,
            month: current_tiem.month,
        }
        editorRef.value.setHtml('')
    }
})
const list_speak = ref([])
const count = ref(0)
const GetData = async (id: number) => {
    const result: any = await store.Get_list_speak(id * 8 - 8)
    result.data.forEach((item: any, index: any) => {
        result.data[index].publish_time = format.formatDate(item.publish_time)
    });
    list_speak.value = result.data

    count.value = result.count
}
const handleUpdate = (index: number, row: any) => {
    index
    forms.value = row
    isEdit.value = true
    dialogVisible.value = true
    nextTick(() => {
        editorRef.value.setHtml(row.rich_text)

    })

}
const handleDelete = async (index: number, row: any) => {
    index
    await store.one_delete(row._id)
    GetData(currentPage.value)
}
const upload_speck = async () => {
    const rich_text = editorRef.value.getHtml()
    const textual = editorRef.value.getText()
    if (textual.trim().length < 10) {
        ElMessage({
            type: "info",
            message: "多说点吧..."
        })
        return
    }
    forms.value.rich_text = rich_text
    forms.value.textual = textual
    if (isEdit.value) {

        await store.one_put({ ...forms.value, publish_time: Date.now() })

        GetData(currentPage.value)
    } else {
        await store.speak_add(forms.value)

        GetData(currentPage.value)
    }


    dialogVisible.value = false
}
const add_speak = () => {
    isEdit.value = false
    dialogVisible.value = true

}
//富文本-----start-----------
onMounted(() => {
    GetData(currentPage.value)
})
const handleCurrentChange = (e: any) => {
    e
    GetData(currentPage.value)
}
const mode = ref("default")
// 内容 HTML
const valueHtml = ref('<p>hello</p>')

const toolbarConfig: Partial<IToolbarConfig> = {
    // const toolbarConfig = {                        
    /* 工具栏配置 */
}

const editorConfig = {
    placeholder: '请输入内容...', MENU_CONF: {
        'codeSelectLang': {

        },
        "uploadImage": {}
    }
}
toolbarConfig.excludeKeys = [
    // 排除菜单组，写菜单组 key 的值即可
    'group-video',
    "fullScreen",
    "codeBlock",
    "insertTable",
    "group-image",
    "todo",
    "group-more-style"
]
const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {

    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})



//富文本---------end---------
</script>

<style scoped lang="scss">
.speaks {
    .over {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .top {
        display: flex;
        justify-content: flex-end;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .page {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-top: 2vw;


    }
}
</style>